<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
      <html lang="en" xmlns:th="http://www.thymeleaf.org">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="stylesheet" href="/bootstrap-4.6.2-dist/css/bootstrap.min.css"  crossorigin="anonymous">
      <title>上中下页面结构</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
    }
    .container {
      display: flex;
      height: 100vh;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    .sidebar {
      width: 200px;
      background-color: #e4cbcf;
      color: #5a4d4d;
      padding: 20px;
      transition: width 0.3s ease;
    }
    .sidebar:hover {
      width: 220px;
    }
    .sidebar a {
      text-decoration: none;
      color: #1d2124;
      display: block;
      padding: 10px 0;
      transition: color 0.3s ease;
    }
    .sidebar a:hover {
      color: #0b2e13;
      transform: translateX(5px);
    }
    .sidebar h2 {
      margin: 0 0 20px;
      font-size: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      padding-bottom: 10px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0;
    }
    .sidebar ul li {
      margin-bottom: 10px;
    }
    .content {
      flex: 1;
      padding: 20px;
      background-color: #c3d7e0;
      overflow-y: auto;
    }
    table.table.table-striped {
      border-collapse: collapse;
      width: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    table.table.table-striped th,
    table.table.table-striped td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    table.table.table-striped th {
      background-color: #f2f2f2;
    }
    table.table.table-striped tr:hover {
      background-color: #f5f5f5;
    }
    button{
      border: 1px solid gray;
      border-radius: 5%;
      width: 120px;
      height: 50px;
      font-family: '楷体';
      font-size: large;
    }
    .form-control:invalid {
      border-color: #dc3545; /* 红色边框 */
      box-shadow: none;
    }

    .form-control:invalid +.valid-feedback {
      display: none;
    }

    .form-control:valid {
      border-color: #28a745; /* 绿色边框 */
      box-shadow: none;
    }

    .form-control:valid + .invalid-feedback{
      display: none;
    }

    input{
      border: 1px solid;
      width: 200px;
      height: 20px;
    }
    label{
      font-family: "楷体";
      font-size: large;
      color: black;
    }
  </style>
</head>
<body>
<div class="row" th:replace="header.html"></div>
<div class="container">
  <div class="sidebar" th:insert="~{left.html}">
  </div>
  <div class="content" title="学生管理系统">
    <form action="/Course/add" class="was-validated" method="post">
      <div class="form-group">
        <label for="name">课程名:</label>
        <input type="text" class="form-control" id="name" placeholder="Enter course name" name="name"  required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入课程名！</div>
      </div>
      <div class="form-group">
        <label for="teacher_id">教师ID:</label>
        <input type="text" class="form-control" id="teacher_id" placeholder="Enter teacher_id" name="teacher_id" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入教师ID！</div>
      </div>
      <div class="form-group form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">同意协议才能提交。</div>
        </label>
      </div><br>
      <button type="submit" class="btn btn-primary">新增课程</button>
    </form>
  </div>
</div>
<div th:replace="footer.html"></div>

<script src="/bootstrap-4.6.2-dist/js/jquery.min.js"  crossorigin="anonymous"></script>
<script src="/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
</body>
</html></title>
</head>
<body>

</body>
</html>